<template>
  <div id="app">
    <!-- <Loading :isShow="isShow" /> -->
    <nav-show ></nav-show>
    
    <ul class="title">
      <li>
         <router-link to="/home"><i class=" fa fa-graduation-cap"></i> 官方首页</router-link>
      </li>
      <li>
        <router-link to="/schoolquery"><i class="fa fa-institution"></i> 学校查询</router-link>
      </li>
      <li>
        <router-link to="/professionalquery"><i class="fa fa-ravelry"></i> 专业查询</router-link>
      </li>
      <li>
        <router-link to="/schoolscore"><i class="fa fa-columns"></i>预测查询</router-link>
      </li>
      <li>
        <router-link to="/profile"><i class="fa fa-user-circle"></i> 个人中心</router-link>
      </li>
    </ul>
    <div class="view_router">
      <transition :name="router_tran">
        <keep-alive>
          <router-view></router-view>
        </keep-alive> 
      </transition>
    </div>
  </div>
</template>
<script>
import NavShow from './components/common/navshow/NavShow'
import Loading from './components/common/loading/loading.vue'
export default {
  name:'app',
  components:{
    NavShow,
    Loading
  },
  data(){
    return{
      router_tran:''
    }
  },
  computed:{
    isShow() {
      return this.$store.state.isShowLoading
    }
  }
  // watch:{
  //     $route(to, from) {
  //     if (to.meta.tx < from.meta.tx) {
  //       this.router_tran= "toright";
  //     } else {
  //       this.router_tran= "toleft";
  //     }
  //   }
  // }
}
</script>
<style scoped>
  @import "./assets/css/base.css";
  @font-face{
    font-family: 'xin';
    src: url('./assets/font/HYShangWeiShouShuW.ttf');     
}
/* body{
   background-image: url(./assets/img/temfile/web10.jpg);
} */
.title{
  width: 1400px;
  display: flex;  
  justify-content: center;
  margin: 0 auto;
  text-align: center; 
  background-color: blanchedalmond;
  border-bottom: 2px solid wheat;
  
}
.title li{
  height: 50px;
  width: 150px;
  
}
.title a{
  display: block;
  height: 100%;
  width: 100%;
  line-height: 50px;
  transition: all linear .5s;
}
.title a:hover{
  background-color: rgba(219, 11, 174, 0.397);
}
.router-link-active{
  background-color: cadetblue;
  border-bottom: 2px solid blueviolet;
}
</style>
